<template>
	<div>
		<el-form :inline="true" >
			<el-row :gutter="20">
				<slot name='title'></slot>
				<el-col :span="6" v-for="queryItem in queryCriteriaList" :key="queryItem">
					<el-form-item :label="queryItem.label" class="form_item">
						<Input v-if="queryItem.type === 'input'" v-model:modelValue="queryItem.value"
							:placeholder="queryItem?.placeholder" :disabled="queryItem?.disabled" @onEnter="onEnter" />
						<Select v-if="queryItem.type === 'select'" v-model:modelValue="queryItem.value"
							:options="queryItem.options" :multiple='queryItem?.multiple'
							:placeholder="queryItem?.placeholder" />
						<DatePicker v-if="queryItem.type === 'datePicker'" v-model:modelValue="queryItem.value"
							:pickerType="queryItem.pickerType" :isShowDay="queryItem.isShowDay" />
						<TreeSelect v-if="queryItem.type === 'treeSelect'" v-model:modelValue="queryItem.value"
							:options="queryItem.options" :multiple='queryItem?.multiple'
							:treeProps='queryItem?.treeProps' :placeholder="queryItem?.placeholder" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item>
						<el-button id="PageSearchRef" type="primary" round :icon="Search" @click="onSearch()">{{
							$t("button.search")
						}}</el-button>
						<el-button :icon="Refresh" round @click="reset">{{ $t("button.reset") }}</el-button>
						<el-button id="PageSearchBolRef" round type="success" :icon="Switch" v-if="isShawHeightSearch" plain
							@click="isShawHeightSearchBol = !isShawHeightSearchBol">{{ $t('newAdd.gaoji')
							}}</el-button>
						<slot name='button'></slot>
					</el-form-item>
				</el-col>
			</el-row>
			<HighSearch v-if="isShawHeightSearchBol" v-model:modelValue="heighSearchData" ref="RefHighSearch"
				@onEnter="onEnter" />
		</el-form>
	</div>
</template>

<script setup lang="ts">
import i18n from "@/lang/index";
import { Refresh, Switch, Search } from '@element-plus/icons-vue'
import Input from './components/input.vue'
import Select from './components/select.vue'
import DatePicker from './components/datePicker.vue'
import TreeSelect from './components/treeSelect.vue'
import HighSearch from './highSearch.vue'
// import _ from 'lodash';
const $t = i18n.global.t;
const props = defineProps({
	queryCriteriaList: {
		type: Object,
		default: {}
	},
	isShawHeightSearch: {
		type: Boolean,
		default: false
	}
})

const { queryCriteriaList, isShawHeightSearch } = toRefs(props)
const queryData = {}
const heighSearchData = ref({})
const isShawHeightSearchBol = ref(false)
const RefHighSearch = ref();
// const cloneQueryCriteriaList = _.cloneDeep(queryCriteriaList.value)
const emits = defineEmits(['onSearch', 'onEnter', 'onReset', 'update:queryCriteriaList'])
// const queryCriteriaList = ref([
// 	{
// 		label: $t('tankManagement.tankCode'),
// 		placeholder: $t('tankManagement.PtankCode'),
// 		type: 'input',
// 		value: null,
// 	},
// 	{
// 		label: $t('tankManagement.tankCode'),
// 		placeholder: $t('tankManagement.PtankCode'),
// 		type: 'select',
// 		value: null,
// 		options:[
// 			{label: '选项1', value: 1},
// 			{label: '选项2', value: 2},
// 		]
// 	},
// 	{
// 		label: $t('tankManagement.tankCode'),
// 		placeholder: $t('tankManagement.PtankCode'),
// 		type: 'datePicker',
// 		format: 'yyyy-MM-dd',
// 		valueName: 'dtNo',
// 		isShowDay: true,
// 		value: [],
// 	},
// ])
watch(queryCriteriaList, (e) => {

	queryCriteriaList.value.forEach((item, i) => {
		queryData[item.valueName] = item.value
	})

}, { deep: true, immediate: true })

watch(heighSearchData, (e) => {
	if (!isShawHeightSearch && !isShawHeightSearchBol) return;
	e = convertToNullRecursively(e)
	Object.assign(queryData, e)
}, { deep: true });

// 高级搜索数据值''转null
const convertToNullRecursively = (obj) => {
	for (let key in obj) {
		if (obj.hasOwnProperty(key)) {
			// 如果属性值是一个字符串且为空，则设置为null
			if (typeof obj[key] === 'string' && obj[key] === '') {
				obj[key] = null;
			}
			// 如果属性值是一个对象，递归处理
			else if (typeof obj[key] === 'object' && obj[key] !== null) {
				// 如果属性值是一个数组，遍历数组并递归处理每个元素
				if (Array.isArray(obj[key])) {
					if (obj[key].length > 0) {
						for (let i = 0; i < obj[key].length; i++) {
							convertToNullRecursively(obj[key][i]);
						}
					} else {
						obj[key] = null;
					}

				} else {
					convertToNullRecursively(obj[key]);
				}

			}

		}
	}
	return obj;
}

const onSearch = () => {
	emits('onSearch', queryData)
}
const onEnter = () => {
	emits('onEnter', queryData)
}
const reset = () => {
	if (RefHighSearch.value) {
		RefHighSearch.value.reset()
	}
	queryCriteriaList.value.forEach((item, i) => {
		if (item.value instanceof Array) {
			item.value = []
		} else if (item.value instanceof Object) {
			item.value = {}
		} else if (item.value instanceof String) {
			item.value = ''
		} else {
			item.value = null
		}
	})
	emits('update:queryCriteriaList', queryCriteriaList.value)
	emits('onReset', queryData)
}
</script>

<style scoped>
.form_item {
	width: 100%;
}
</style>
